<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

onLoad(() => {})

const selecMoudleList = ref<Array<any>>([
  {
    name: '根据大学选科',
    color: 'rgba(101, 134, 248, 0.70)',
    url: '/pages/SubjectSelectionAssistant/byCollege/index',
  },
  {
    name: '根据选科查大学',
    color: 'rgba(255, 140, 83, 0.70)',
    url: '/pages/SubjectSelectionAssistant/byCourse/index',
  },
  {
    name: '根据专业定选科',
    color: 'rgba(59, 153, 230, 0.70)',
    url: '/pages/SubjectSelectionAssistant/byMajor/index',
  },
])

const careerTestList = ref([
  {
    name: '职业性格测试',
    color: 'linear-gradient(180deg, #49BEFF 0%, #3186FC 100%), linear-gradient(239deg, #91D6A9 17.23%, #66C181 99.93%), #FAFAFA;',
    url: '',
  },
  {
    name: '人格兴趣测试',
    color: 'linear-gradient(224deg, #B8A1F7 2.68%, #B67BF4 99.93%), #FAFAFA;',
    url: '',
  },
  {
    name: '学科兴趣测试',
    color: 'linear-gradient(223deg, #EB9CA1 3.08%, #EB6F9B 98.48%), linear-gradient(0deg, #638AFF 0%, #638AFF 100%), #FFF;',
    url: '',
  },
  {
    name: '历史测评记录',
    color: 'linear-gradient(222deg, #E3D694 3.79%, #E7AD68 97.63%), #FAFAFA;',
    url: '',
  },
])

const toDetail = (item: { url: any }) => {
  uni.navigateTo({
    url: `${item.url}`,
  })
}
</script>

<template>
  <gui-page
    ref="guipage"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">选科助手</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gFixedTop>
      <!-- 分类导航 -->
    </template>
    <template #gBody>
      <view class="wh100p flex-column gui-relative" style="flex: 1; background-color: #e7eaf3; padding: 0 30rpx; box-sizing: border-box">
        <view class="gui-relative gui-flex1">
          <scroll-view class="gui-absolute-full gui-flex1" scroll-y style="">
            <view class="flex-column gap18">
              <view class="w100p flex-column gap12 mt20 column-center">
                <view
                  v-for="(item, index) in selecMoudleList"
                  :key="index"
                  class="big-item-box w100p flex-center column-center"
                  :style="{ background: `${item.color}` }"
                  @tap="toDetail(item)"
                >
                  <text class="title">{{ item.name }}</text>
                  <!--                <view class="w100p flex-end">-->
                  <!--                  <view>-->
                  <!--                    <button-->
                  <!--                      class="flex-center gui-noborder"-->
                  <!--                      style="background-color: rgb(69, 124, 213); width: 120rpx; padding: 0; height: 60rpx; border: 0"-->
                  <!--                      @tap.stop=""-->
                  <!--                    >-->
                  <!--                      <text style="color: white; font-size: 24rpx">开始选科</text>-->
                  <!--                    </button>-->
                  <!--                  </view>-->
                  <!--                </view>-->
                </view>
              </view>
              <view class="flex-column gap8">
                <text>生涯测试帮你定位好专业</text>
                <view class="evaluation-box flex-between gap12" style="flex-wrap: wrap; padding: 0 10rpx; box-sizing:">
                  <view
                    v-for="(item, index) in careerTestList"
                    :key="index"
                    class="item flex-center column-center"
                    :style="`background: ${item.color}`"
                  >
                    {{ item.name }}
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.assistantPageBox {
  //padding: 0 25rpx;
  box-sizing: border-box;
}

.big-item-box {
  height: 180rpx;
  width: 97%;
  box-sizing: border-box;
  padding: 20rpx;
  border-radius: 10rpx;
  background: #3487da;

  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  transition: 0.2s all;
}

.big-item-box:active {
  box-shadow:
    0 0 0 rgba(0, 0, 0, 0.4),
    0 0 0 rgba(255, 255, 255, 0.9),
    inset -2px -2px 10px rgba(255, 255, 255, 0.5),
    inset 5px 5px 7px rgba(0, 0, 0, 0.4);
}

.big-item-box .title {
  color: white;
  font-size: 38rpx;
}

.evaluation-box .item {
  width: 320rpx;
  height: 160rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 34rpx;
  font-weight: 600;
  color: white;
  flex-wrap: wrap;
  background: #3487da;
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.4),
    -2px -2px 12px rgba(255, 255, 255, 0.5);
  transition: 0.2s all;
}

.evaluation-box .item:active {
  box-shadow:
    0 0 0 rgba(0, 0, 0, 0.4),
    0 0 0 rgba(255, 255, 255, 0.9),
    inset -2px -2px 10px rgba(255, 255, 255, 0.5),
    inset 5px 5px 7px rgba(0, 0, 0, 0.4);
}
</style>
